<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能题库 - 在线答题系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        danger: '#EF4444',
                        warning: '#F59E0B',
                        info: '#3B82F6',
                        light: '#F3F4F6',
                        dark: '#1F2937',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-transition {
                transition: all 0.3s ease;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300" id="navbar">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="#" class="flex-shrink-0 flex items-center">
                        <i class="fa fa-graduation-cap text-primary text-2xl mr-2"></i>
                        <span class="text-xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">智能题库</span>
                    </a>
                    <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                        <a href="#question-input" class="border-b-2 border-primary px-1 pt-1 inline-flex items-center text-sm font-medium text-primary">
                            <i class="fa fa-pencil-square-o mr-1"></i>导入题目
                        </a>
                        <a href="#question-list" class="border-transparent hover:border-gray-300 border-b-2 px-1 pt-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700">
                            <i class="fa fa-list-alt mr-1"></i>题目列表
                        </a>
                        <a href="#my-collection" class="border-transparent hover:border-gray-300 border-b-2 px-1 pt-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700">
                            <i class="fa fa-bookmark mr-1"></i>我的收藏
                        </a>
                    </div>
                </div>
                <div class="flex items-center">
                    <button id="theme-toggle" class="p-2 rounded-full text-gray-500 hover:text-gray-700 focus:outline-none">
                        <i class="fa fa-moon-o"></i>
                    </button>
                    <div class="ml-4 flex items-center sm:ml-6">
                        <button id="result-btn" class="hidden sm:inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300">
                            <i class="fa fa-calculator mr-2"></i>查看成绩
                        </button>
                    </div>
                    <div class="ml-3 relative">
                        <div>
                            <button id="mobile-menu-button" class="p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none sm:hidden">
                                <i class="fa fa-bars"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="mobile-menu" class="sm:hidden hidden">
            <div class="px-2 pt-2 pb-3 space-y-1 bg-white shadow-lg rounded-b-lg">
                <a href="#question-input" class="block px-3 py-2 rounded-md text-base font-medium text-primary bg-primary/10">
                    <i class="fa fa-pencil-square-o mr-1"></i>导入题目
                </a>
                <a href="#question-list" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-primary/10">
                    <i class="fa fa-list-alt mr-1"></i>题目列表
                </a>
                <a href="#my-collection" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-primary/10">
                    <i class="fa fa-bookmark mr-1"></i>我的收藏
                </a>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="flex-grow">
        <!-- 页面标题 -->
        <div class="bg-gradient-primary text-white py-12 shadow-lg">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 text-shadow">智能题库系统</h1>
                <p class="text-xl md:text-2xl opacity-90 mb-6">轻松导入、管理和练习各类题目</p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="#question-input" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                        <i class="fa fa-file-code-o mr-2"></i>开始导入题目
                    </a>
                    <a href="#features" class="inline-flex items-center px-6 py-3 border border-white text-base font-medium rounded-md text-white bg-transparent hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition-all duration-300">
                        <i class="fa fa-info-circle mr-2"></i>了解功能
                    </a>
                </div>
            </div>
        </div>

        <!-- 功能特点 -->
        <section id="features" class="py-16 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">强大功能</h2>
                    <p class="text-lg text-gray-600 max-w-3xl mx-auto">我们的智能题库系统提供全方位的题目管理和练习体验</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="bg-gray-50 rounded-xl p-8 shadow-card hover:shadow-card-hover card-transition transform hover:-translate-y-2">
                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                            <i class="fa fa-code text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">智能解析</h3>
                        <p class="text-gray-600">自动识别多种题型，包括选择题、填空题和判断题，无需手动分类</p>
                    </div>

                    <div class="bg-gray-50 rounded-xl p-8 shadow-card hover:shadow-card-hover card-transition transform hover:-translate-y-2">
                        <div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-6">
                            <i class="fa fa-bookmark text-secondary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">题目收藏</h3>
                        <p class="text-gray-600">一键收藏重要题目，自动保存到本地题库，随时复习</p>
                    </div>

                    <div class="bg-gray-50 rounded-xl p-8 shadow-card hover:shadow-card-hover card-transition transform hover:-translate-y-2">
                        <div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mb-6">
                            <i class="fa fa-calculator text-accent text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">自动评分</h3>
                        <p class="text-gray-600">答题结束后立即获得评分结果，查看错题解析</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 题目输入区域 -->
        <section id="question-input" class="py-16 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
                    <div class="bg-gradient-primary p-6 sm:p-8">
                        <h2 class="text-2xl sm:text-3xl font-bold text-white mb-2">导入题目</h2>
                        <p class="text-white/80">粘贴JSON格式的题目或导入JS/JSON文件，系统将自动解析</p>
                    </div>
                    <div class="p-6 sm:p-8">
                        <div class="mb-6">
                            <label for="question-json" class="block text-sm font-medium text-gray-700 mb-2">题目JSON</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-code text-gray-400"></i>
                                </div>
                                <textarea id="question-json" rows="10" class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg shadow-sm input-focus transition-all duration-300" placeholder='{
    "选择题": [
        {
            "question": "题目内容",
            "options": ["A. 选项1", "B. 选项2", "C. 选项3", "D. 选项4"],
            "answer": "B",
            "explanation": "答案解析"
        }
    ],
    "填空题": [
        {
            "question": "题目内容（  ）",
            "answer": "答案",
            "explanation": "答案解析"
        }
    ],
    "判断题": [
        {
            "question": "题目内容",
            "answer": "正确",
            "explanation": "答案解析"
        }
    ]
}'></textarea>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">请使用上述格式输入题目，系统支持选择题、填空题和判断题</p>
                        </div>
                        
                        <!-- 文件导入区域 -->
                        <div class="mb-6">
                            <div class="flex items-center justify-center w-full">
                                <label for="file-upload" class="flex flex-col items-center justify-center w-full h-40 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition-all duration-300">
                                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                        <i class="fa fa-cloud-upload text-gray-400 text-3xl mb-2"></i>
                                        <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">点击上传文件</span> 或拖放</p>
                                        <p class="text-xs text-gray-500">支持 JS, JSON 文件</p>
                                    </div>
                                    <input id="file-upload" type="file" class="hidden" accept=".js,.json" />
                                </label>
                            </div>
                        </div>
                        
                        <div class="flex flex-col sm:flex-row gap-4">
                            <button id="parse-btn" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300 transform hover:-translate-y-1 shadow-md hover:shadow-lg">
                                <i class="fa fa-magic mr-2"></i>解析题目
                            </button>
                            <button id="export-btn" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-secondary hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary transition-all duration-300 transform hover:-translate-y-1 shadow-md hover:shadow-lg">
                                <i class="fa fa-download mr-2"></i>导出题目
                            </button>
                            <button id="example-btn" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300 transform hover:-translate-y-1 shadow-md hover:shadow-lg">
                                <i class="fa fa-lightbulb-o mr-2"></i>加载示例
                            </button>
                            <button id="clear-btn" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300 transform hover:-translate-y-1 shadow-md hover:shadow-lg">
                                <i class="fa fa-eraser mr-2"></i>清空
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 题目列表区域 -->
        <section id="question-list" class="py-16 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="mb-8 flex flex-col sm:flex-row justify-between items-start sm:items-center">
                    <div>
                        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">题目列表</h2>
                        <p class="text-gray-600">共 <span id="total-questions" class="font-medium">0</span> 题，总分 <span id="total-score" class="font-medium">0</span> 分</p>
                    </div>
                    <div class="mt-4 sm:mt-0 flex items-center gap-4">
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-search text-gray-400"></i>
                            </div>
                            <input type="text" id="search-input" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md input-focus transition-all duration-300" placeholder="搜索题目...">
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-gray-600">筛选：</span>
                            <select id="question-filter" class="block pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md transition-all duration-300">
                                <option value="all">全部题型</option>
                                <option value="选择题">选择题</option>
                                <option value="填空题">填空题</option>
                                <option value="判断题">判断题</option>
                                <option value="collected">已收藏</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="questions-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- 题目卡片将在这里动态生成 -->
                    <div class="col-span-full text-center py-12">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                            <i class="fa fa-file-text-o text-gray-400 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">暂无题目</h3>
                        <p class="text-gray-500 mb-6">请在上方输入题目JSON并点击"解析题目"按钮</p>
                        <a href="#question-input" class="inline-flex items-center px-4 py-2 border border-primary text-sm font-medium rounded-md text-primary bg-white hover:bg-primary/5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300">
                            <i class="fa fa-arrow-up mr-2"></i>前往导入题目
                        </a>
                    </div>
                </div>

                <div class="mt-10 text-center">
                    <button id="check-answers-btn" class="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        <i class="fa fa-check-circle mr-2"></i>提交答案并评分
                    </button>
                </div>
            </div>
        </section>

        <!-- 我的收藏区域 -->
        <section id="my-collection" class="py-16 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="mb-8">
                    <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">我的收藏</h2>
                    <p class="text-gray-600">已收藏 <span id="collected-count" class="font-medium">0</span> 道题目</p>
                </div>

                <div id="collections-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- 收藏的题目卡片将在这里动态生成 -->
                    <div class="col-span-full text-center py-12">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                            <i class="fa fa-bookmark-o text-gray-400 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">暂无收藏</h3>
                        <p class="text-gray-500 mb-0">答题时点击题目卡片上的收藏按钮添加题目到收藏夹</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 结果弹窗 -->
        <div id="result-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                </div>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
                <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start">
                            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
                                <i class="fa fa-trophy text-green-500 text-xl"></i>
                            </div>
                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">答题结果</h3>
                                <div class="mb-6">
                                    <div class="flex justify-between items-center mb-2">
                                        <span class="text-gray-600">总分：</span>
                                        <span class="text-2xl font-bold text-primary" id="result-total-score">0</span>
                                    </div>
                                    <div class="flex justify-between items-center mb-2">
                                        <span class="text-gray-600">答对题数：</span>
                                        <span class="font-medium" id="result-correct-count">0</span>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <span class="text-gray-600">答错题数：</span>
                                        <span class="font-medium" id="result-incorrect-count">0</span>
                                    </div>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2.5 mb-6">
                                    <div id="result-progress" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
                                </div>
                                <div class="flex flex-col sm:flex-row gap-3">
                                    <button id="review-btn" class="inline-flex justify-center w-full px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300">
                                        <i class="fa fa-list-alt mr-2"></i>查看错题
                                    </button>
                                    <button id="restart-btn" class="inline-flex justify-center w-full px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300">
                                        <i class="fa fa-refresh mr-2"></i>重新答题
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center mb-4">
                        <i class="fa fa-graduation-cap text-primary text-2xl mr-2"></i>
                        <span class="text-xl font-bold">智能题库</span>
                    </div>
                    <p class="text-gray-400 mb-4">智能题库系统帮助你轻松管理和练习各类题目，提高学习效率。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">功能</h3>
                    <ul class="space-y-2">
                        <li><a href="#question-input" class="text-gray-400 hover:text-white transition-colors duration-300">题目导入</a></li>
                        <li><a href="#question-list" class="text-gray-400 hover:text-white transition-colors duration-300">在线答题</a></li>
                        <li><a href="#my-collection" class="text-gray-400 hover:text-white transition-colors duration-300">题目收藏</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">自动评分</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-2">
                        <li class="flex items-center">
                            <i class="fa fa-envelope-o text-gray-400 mr-2"></i>
                            <a href="mailto:support@zhititiku.com" class="text-gray-400 hover:text-white transition-colors duration-300">support@zhititiku.com</a>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone text-gray-400 mr-2"></i>
                            <span class="text-gray-400">+86 123 4567 8910</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-map-marker text-gray-400 mr-2"></i>
                            <span class="text-gray-400">北京市海淀区中关村大街1号</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2025 智能题库系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 全局变量
        let allQuestions = [];
        let currentQuestions = [];
        let collectedQuestions = [];
        let questionScore = 0;
        let totalScore = 0;

        // DOM 元素
        const questionJsonTextarea = document.getElementById('question-json');
        const parseBtn = document.getElementById('parse-btn');
        const exampleBtn = document.getElementById('example-btn');
        const clearBtn = document.getElementById('clear-btn');
        const questionsContainer = document.getElementById('questions-container');
        const collectionsContainer = document.getElementById('collections-container');
        const totalQuestionsElement = document.getElementById('total-questions');
        const totalScoreElement = document.getElementById('total-score');
        const collectedCountElement = document.getElementById('collected-count');
        const checkAnswersBtn = document.getElementById('check-answers-btn');
        const resultModal = document.getElementById('result-modal');
        const resultTotalScoreElement = document.getElementById('result-total-score');
        const resultCorrectCountElement = document.getElementById('result-correct-count');
        const resultIncorrectCountElement = document.getElementById('result-incorrect-count');
        const resultProgressElement = document.getElementById('result-progress');
        const reviewBtn = document.getElementById('review-btn');
        const restartBtn = document.getElementById('restart-btn');
        const searchInput = document.getElementById('search-input');
        const questionFilter = document.getElementById('question-filter');
        const resultBtn = document.getElementById('result-btn');
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const navbar = document.getElementById('navbar');
        const themeToggle = document.getElementById('theme-toggle');
        const fileUpload = document.getElementById('file-upload');
        const exportBtn = document.getElementById('export-btn');

        // 示例题目数据
        const exampleQuestions = {
            "选择题": [
                {
                    "question": "王小元来找李潇，脸上的表情主要是？",
                    "options": ["A. 兴奋", "B. 担忧和焦急", "C. 冷漠", "D. 愤怒"],
                    "answer": "B",
                    "explanation": "文中明确提到‘王小元那张肉乎乎的脸上堆满了担忧和焦急’，所以答案是B。"
                },
                {
                    "question": "王小元从怀里掏出的玉瓶里装的是什么？",
                    "options": ["A. 普通丹药", "B. 三纹炼气丹", "C. 补气草药", "D. 疗伤圣药"],
                    "answer": "B",
                    "explanation": "文中王小元提到‘这是我爹托了好大的关系才弄到的宝贝，三纹炼气丹’，可知答案为B。"
                },
                {
                    "question": "王小元提到去年体修班的最低门槛是？",
                    "options": ["A. 炼气二重", "B. 炼气三重", "C. 炼气四重", "D. 炼气五重"],
                    "answer": "C",
                    "explanation": "原文提到‘去年的最低门槛都是炼气四重’，所以选C。"
                }
            ],
            "填空题": [
                {
                    "question": "王小元将玉瓶按进李潇搁在（  ）的手掌里。",
                    "answer": "案几",
                    "explanation": "文中表述为‘将那温润的玉瓶狠狠按进李潇搁在案几的手掌里’，所以填案几。"
                },
                {
                    "question": "王小元掏出的玉瓶里装的是三纹（  ）。",
                    "answer": "炼气丹",
                    "explanation": "根据文中王小元所说可知装的是三纹炼气丹，所以填炼气丹。"
                },
                {
                    "question": "王小元的胖脸因（  ）而微微抽搐。",
                    "answer": "焦急",
                    "explanation": "文中提到‘他的胖脸因焦急而微微抽搐’，故填焦急。"
                }
            ],
            "判断题": [
                {
                    "question": "王小元是蹦蹦跳跳来到李潇案几旁的。",
                    "answer": "错误",
                    "explanation": "文中说‘一个圆胖的身影终于挨到李潇的案几旁’，不是蹦蹦跳跳，所以答案为错误。"
                },
                {
                    "question": "王小元带来的三纹炼气丹药力绝对精纯。",
                    "answer": "正确",
                    "explanation": "文中王小元说‘药力绝对精纯’，所以该判断正确。"
                },
                {
                    "question": "王小元认为体修班的要求太低了。",
                    "answer": "错误",
                    "explanation": "文中王小元说‘体修班的要求太高了……太严了’，并非要求低，所以答案为错误。"
                }
            ]
        };

        // 初始化
        function init() {
            // 加载本地存储的收藏题目
            loadCollectedQuestions();
            
            // 绑定事件监听器
            parseBtn.addEventListener('click', parseQuestions);
            exampleBtn.addEventListener('click', loadExample);
            clearBtn.addEventListener('click', clearInput);
            checkAnswersBtn.addEventListener('click', showResult);
            reviewBtn.addEventListener('click', hideResultModal);
            restartBtn.addEventListener('click', restartQuiz);
            searchInput.addEventListener('input', filterQuestions);
            questionFilter.addEventListener('change', filterQuestions);
            resultBtn.addEventListener('click', showResult);
            mobileMenuButton.addEventListener('click', toggleMobileMenu);
            themeToggle.addEventListener('click', toggleTheme);
            fileUpload.addEventListener('change', handleFileUpload);
            exportBtn.addEventListener('click', exportQuestions);
            
            // 滚动事件处理
            window.addEventListener('scroll', handleScroll);
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                    
                    // 如果是移动设备，点击导航链接后关闭菜单
                    if (window.innerWidth < 640) {
                        mobileMenu.classList.add('hidden');
                    }
                });
            });
        }

        // 解析题目
        function parseQuestions() {
            try {
                const jsonText = questionJsonTextarea.value.trim();
                if (!jsonText) {
                    showToast('请输入题目JSON或上传文件', 'warning');
                    return;
                }
                
                const questionsData = JSON.parse(jsonText);
                allQuestions = [];
                
                // 解析选择题
                if (questionsData['选择题'] && Array.isArray(questionsData['选择题'])) {
                    questionsData['选择题'].forEach((q, index) => {
                        allQuestions.push({
                            id: `choice-${index}`,
                            type: '选择题',
                            question: q.question,
                            options: q.options,
                            answer: q.answer,
                            explanation: q.explanation,
                            userAnswer: null,
                            isCollected: isQuestionCollected(`choice-${index}`)
                        });
                    });
                }
                
                // 解析填空题
                if (questionsData['填空题'] && Array.isArray(questionsData['填空题'])) {
                    questionsData['填空题'].forEach((q, index) => {
                        allQuestions.push({
                            id: `fill-${index}`,
                            type: '填空题',
                            question: q.question,
                            answer: q.answer,
                            explanation: q.explanation,
                            userAnswer: null,
                            isCollected: isQuestionCollected(`fill-${index}`)
                        });
                    });
                }
                
                // 解析判断题
                if (questionsData['判断题'] && Array.isArray(questionsData['判断题'])) {
                    questionsData['判断题'].forEach((q, index) => {
                        allQuestions.push({
                            id: `judge-${index}`,
                            type: '判断题',
                            question: q.question,
                            answer: q.answer,
                            explanation: q.explanation,
                            userAnswer: null,
                            isCollected: isQuestionCollected(`judge-${index}`)
                        });
                    });
                }
                
                if (allQuestions.length === 0) {
                    showToast('未找到有效题目', 'warning');
                    return;
                }
                
                // 计算每题分值和总分
                questionScore = Math.round(100 / allQuestions.length * 10) / 10; // 保留一位小数
                totalScore = Math.round(questionScore * allQuestions.length);
                
                // 更新UI
                currentQuestions = [...allQuestions];
                renderQuestions(currentQuestions);
                updateStats();
                
                // 滚动到题目列表
                document.getElementById('question-list').scrollIntoView({
                    behavior: 'smooth'
                });
                
                showToast(`成功解析 ${allQuestions.length} 道题目`, 'success');
            } catch (error) {
                showToast(`解析失败: ${error.message}`, 'error');
            }
        }

        // 处理文件上传
        function handleFileUpload(event) {
            const file = event.target.files[0];
            if (!file) return;
            
            // 检查文件类型
            const fileExtension = file.name.split('.').pop().toLowerCase();
            if (fileExtension !== 'js' && fileExtension !== 'json') {
                showToast('请上传JS或JSON文件', 'warning');
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    let content = e.target.result;
                    
                    // 如果是JS文件，尝试提取导出的对象
                    if (fileExtension === 'js') {
                        // 简单的正则表达式匹配，提取导出的对象
                        const match = content.match(/export\s+default\s+(\{[\s\S]*\})/);
                        if (match && match[1]) {
                            content = match[1];
                        } else {
                            // 尝试其他可能的导出格式
                            const altMatch = content.match(/module\.exports\s*=\s*(\{[\s\S]*\})/);
                            if (altMatch && altMatch[1]) {
                                content = altMatch[1];
                            }
                        }
                    }
                    
                    // 解析JSON
                    const questionsData = JSON.parse(content);
                    
                    // 填充到文本框
                    questionJsonTextarea.value = JSON.stringify(questionsData, null, 4);
                    
                    showToast(`成功加载 ${file.name}`, 'success');
                } catch (error) {
                    showToast(`文件解析失败: ${error.message}`, 'error');
                }
            };
            
            reader.readAsText(file);
        }

        // 导出题目
        function exportQuestions() {
            if (allQuestions.length === 0) {
                showToast('没有题目可导出', 'warning');
                return;
            }
            
            // 转换为可导出的格式
            const exportData = {
                选择题: allQuestions.filter(q => q.type === '选择题').map(q => ({
                    question: q.question,
                    options: q.options,
                    answer: q.answer,
                    explanation: q.explanation
                })),
                填空题: allQuestions.filter(q => q.type === '填空题').map(q => ({
                    question: q.question,
                    answer: q.answer,
                    explanation: q.explanation
                })),
                判断题: allQuestions.filter(q => q.type === '判断题').map(q => ({
                    question: q.question,
                    answer: q.answer,
                    explanation: q.explanation
                }))
            };
            
            // 创建JS文件内容
            const jsContent = `export default ${JSON.stringify(exportData, null, 4)};`;
            
            // 创建下载链接
            const blob = new Blob([jsContent], { type: 'application/javascript' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `questions_${new Date().toISOString().slice(0, 10)}.js`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            showToast('题目已导出为JS文件', 'success');
        }

        // 加载示例题目
        function loadExample() {
            questionJsonTextarea.value = JSON.stringify(exampleQuestions, null, 4);
            showToast('已加载示例题目', 'info');
        }

        // 清空输入
        function clearInput() {
            questionJsonTextarea.value = '';
            fileUpload.value = ''; // 清空文件选择
            showToast('已清空输入', 'info');
        }

        // 渲染题目列表
        function renderQuestions(questions) {
            if (questions.length === 0) {
                questionsContainer.innerHTML = `
                    <div class="col-span-full text-center py-12">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                            <i class="fa fa-search text-gray-400 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">没有找到匹配的题目</h3>
                        <p class="text-gray-500 mb-0">请尝试调整搜索条件</p>
                    </div>
                `;
                checkAnswersBtn.disabled = true;
                return;
            }
            
            questionsContainer.innerHTML = '';
            questions.forEach((question, index) => {
                const questionCard = createQuestionCard(question, index + 1);
                questionsContainer.appendChild(questionCard);
            });
            
            // 为所有选择题和判断题的选项添加事件监听器
            document.querySelectorAll('input[type="radio"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    const questionId = this.name.split('-')[1];
                    const userAnswer = this.value;
                    
                    // 更新问题对象中的用户答案
                    const questionIndex = allQuestions.findIndex(q => q.id === questionId);
                    if (questionIndex !== -1) {
                        allQuestions[questionIndex].userAnswer = userAnswer;
                    }
                });
            });
            
            // 为所有填空题添加事件监听器
            document.querySelectorAll('input[data-question-id]').forEach(input => {
                input.addEventListener('input', function() {
                    const questionId = this.getAttribute('data-question-id');
                    const userAnswer = this.value.trim();
                    
                    // 更新问题对象中的用户答案
                    const questionIndex = allQuestions.findIndex(q => q.id === questionId);
                    if (questionIndex !== -1) {
                        allQuestions[questionIndex].userAnswer = userAnswer;
                    }
                });
            });
            
            checkAnswersBtn.disabled = false;
        }

        // 创建题目卡片
        function createQuestionCard(question, number) {
            const card = document.createElement('div');
            card.className = 'bg-white rounded-xl shadow-card hover:shadow-card-hover card-transition overflow-hidden border border-gray-100';
            card.dataset.id = question.id;
            
            let optionsHtml = '';
            let userAnswerHtml = '';
            
            // 根据题型生成不同的选项和用户答案输入
            if (question.type === '选择题') {
                optionsHtml = question.options.map(option => `
                    <div class="mb-2">
                        <label class="flex items-center p-3 rounded-lg border border-gray-200 hover:bg-gray-50 cursor-pointer transition-all duration-200">
                            <input type="radio" name="answer-${question.id}" value="${option.charAt(0)}" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" ${question.userAnswer === option.charAt(0) ? 'checked' : ''}>
                            <span class="ml-2 text-sm font-medium text-gray-700">${option}</span>
                        </label>
                    </div>
                `).join('');
                
                userAnswerHtml = `
                    <div class="mt-4">
                        ${optionsHtml}
                    </div>
                `;
            } else if (question.type === '填空题') {
                userAnswerHtml = `
                    <div class="mt-4">
                        <input type="text" class="w-full p-3 border border-gray-300 rounded-lg input-focus transition-all duration-300" placeholder="请输入答案" data-question-id="${question.id}" value="${question.userAnswer || ''}">
                    </div>
                `;
            } else if (question.type === '判断题') {
                optionsHtml = `
                    <div class="flex space-x-4">
                        <div class="mb-2 flex-1">
                            <label class="flex items-center justify-center p-3 rounded-lg border border-gray-200 hover:bg-gray-50 cursor-pointer transition-all duration-200">
                                <input type="radio" name="answer-${question.id}" value="正确" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" ${question.userAnswer === '正确' ? 'checked' : ''}>
                                <span class="ml-2 text-sm font-medium text-gray-700">正确</span>
                            </label>
                        </div>
                        <div class="mb-2 flex-1">
                            <label class="flex items-center justify-center p-3 rounded-lg border border-gray-200 hover:bg-gray-50 cursor-pointer transition-all duration-200">
                                <input type="radio" name="answer-${question.id}" value="错误" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" ${question.userAnswer === '错误' ? 'checked' : ''}>
                                <span class="ml-2 text-sm font-medium text-gray-700">错误</span>
                            </label>
                        </div>
                    </div>
                `;
                
                userAnswerHtml = `
                    <div class="mt-4">
                        ${optionsHtml}
                    </div>
                `;
            }
            
            // 创建卡片内容
            card.innerHTML = `
                <div class="p-6">
                    <div class="flex justify-between items-start mb-4">
                        <div class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary/10 text-primary">
                            ${question.type}
                        </div>
                        <button class="collect-btn text-gray-400 hover:text-primary transition-colors duration-300" data-id="${question.id}">
                            <i class="fa ${question.isCollected ? 'fa-bookmark' : 'fa-bookmark-o'} text-xl"></i>
                        </button>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
                        <span class="text-primary font-bold">${number}.</span> ${question.question}
                    </h3>
                    
                    ${userAnswerHtml}
                    
                    <div class="mt-4 flex justify-between items-center">
                        <span class="text-sm text-gray-500">${questionScore} 分</span>
                        <button class="show-explanation-btn text-sm text-primary hover:text-primary/80 transition-colors duration-300" data-id="${question.id}">
                            查看解析
                        </button>
                    </div>
                    
                    <div class="explanation mt-4 p-4 bg-gray-50 rounded-lg hidden">
                        <div class="flex items-center text-sm font-medium text-gray-700 mb-2">
                            <i class="fa fa-lightbulb-o text-yellow-500 mr-2"></i>
                            答案解析
                        </div>
                        <p class="text-sm text-gray-600">${question.explanation}</p>
                    </div>
                </div>
            `;
            
            // 绑定收藏按钮事件
            const collectBtn = card.querySelector('.collect-btn');
            collectBtn.addEventListener('click', function() {
                const questionId = this.getAttribute('data-id');
                toggleCollect(questionId);
            });
            
            // 绑定查看解析按钮事件
            const showExplanationBtn = card.querySelector('.show-explanation-btn');
            showExplanationBtn.addEventListener('click', function() {
                const explanationDiv = this.parentElement.nextElementSibling;
                explanationDiv.classList.toggle('hidden');
                this.textContent = explanationDiv.classList.contains('hidden') ? '查看解析' : '隐藏解析';
            });
            
            return card;
        }

        // 渲染收藏的题目
        function renderCollectedQuestions() {
            if (collectedQuestions.length === 0) {
                collectionsContainer.innerHTML = `
                    <div class="col-span-full text-center py-12">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                            <i class="fa fa-bookmark-o text-gray-400 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">暂无收藏</h3>
                        <p class="text-gray-500 mb-0">答题时点击题目卡片上的收藏按钮添加题目到收藏夹</p>
                    </div>
                `;
                return;
            }
            
            collectionsContainer.innerHTML = '';
            collectedQuestions.forEach((question, index) => {
                const questionCard = createCollectionCard(question, index + 1);
                collectionsContainer.appendChild(questionCard);
            });
        }

        // 创建收藏的题目卡片
        function createCollectionCard(question, number) {
            const card = document.createElement('div');
            card.className = 'bg-white rounded-xl shadow-card hover:shadow-card-hover card-transition overflow-hidden border border-gray-100';
            card.dataset.id = question.id;
            
            let optionsHtml = '';
            
            // 根据题型生成不同的选项显示
            if (question.type === '选择题') {
                optionsHtml = question.options.map(option => `
                    <div class="mb-2">
                        <div class="flex items-center p-3 rounded-lg border border-gray-200">
                            <span class="text-sm font-medium text-gray-700">${option}</span>
                        </div>
                    </div>
                `).join('');
            } else if (question.type === '判断题') {
                optionsHtml = `
                    <div class="flex space-x-4">
                        <div class="mb-2 flex-1">
                            <div class="flex items-center justify-center p-3 rounded-lg border border-gray-200">
                                <span class="text-sm font-medium text-gray-700">正确</span>
                            </div>
                        </div>
                        <div class="mb-2 flex-1">
                            <div class="flex items-center justify-center p-3 rounded-lg border border-gray-200">
                                <span class="text-sm font-medium text-gray-700">错误</span>
                            </div>
                        </div>
                    </div>
                `;
            }
            
            // 创建卡片内容
            card.innerHTML = `
                <div class="p-6">
                    <div class="flex justify-between items-start mb-4">
                        <div class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary/10 text-primary">
                            ${question.type}
                        </div>
                        <button class="collect-btn text-primary hover:text-gray-400 transition-colors duration-300" data-id="${question.id}">
                            <i class="fa fa-bookmark text-xl"></i>
                        </button>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
                        <span class="text-primary font-bold">${number}.</span> ${question.question}
                    </h3>
                    
                    ${question.type !== '填空题' ? `<div class="mt-4">${optionsHtml}</div>` : ''}
                    
                    <div class="mt-4">
                        <div class="flex items-center text-sm font-medium text-gray-700 mb-2">
                            <i class="fa fa-check-circle text-green-500 mr-2"></i>
                            正确答案
                        </div>
                        <p class="text-sm text-gray-600">${question.type === '选择题' ? question.answer + '. ' : ''}${question.answer}</p>
                    </div>
                    
                    <div class="explanation mt-4 p-4 bg-gray-50 rounded-lg">
                        <div class="flex items-center text-sm font-medium text-gray-700 mb-2">
                            <i class="fa fa-lightbulb-o text-yellow-500 mr-2"></i>
                            答案解析
                        </div>
                        <p class="text-sm text-gray-600">${question.explanation}</p>
                    </div>
                </div>
            `;
            
            // 绑定收藏按钮事件
            const collectBtn = card.querySelector('.collect-btn');
            collectBtn.addEventListener('click', function() {
                const questionId = this.getAttribute('data-id');
                toggleCollect(questionId);
            });
            
            return card;
        }

        // 切换收藏状态
        function toggleCollect(questionId) {
            const questionIndex = allQuestions.findIndex(q => q.id === questionId);
            if (questionIndex === -1) return;
            
            // 切换收藏状态
            allQuestions[questionIndex].isCollected = !allQuestions[questionIndex].isCollected;
            
            // 更新收藏列表
            if (allQuestions[questionIndex].isCollected) {
                // 添加到收藏
                collectedQuestions.push(allQuestions[questionIndex]);
                showToast('题目已收藏', 'success');
            } else {
                // 从收藏中移除
                const collectedIndex = collectedQuestions.findIndex(q => q.id === questionId);
                if (collectedIndex !== -1) {
                    collectedQuestions.splice(collectedIndex, 1);
                    showToast('已取消收藏', 'info');
                }
            }
            
            // 保存到本地存储
            saveCollectedQuestions();
            
            // 更新UI
            renderQuestions(currentQuestions);
            renderCollectedQuestions();
            updateStats();
        }

        // 检查题目是否已收藏
        function isQuestionCollected(questionId) {
            return collectedQuestions.some(q => q.id === questionId);
        }

        // 保存收藏的题目到本地存储
        function saveCollectedQuestions() {
            localStorage.setItem('collectedQuestions', JSON.stringify(collectedQuestions));
        }

        // 从本地存储加载收藏的题目
        function loadCollectedQuestions() {
            const savedQuestions = localStorage.getItem('collectedQuestions');
            if (savedQuestions) {
                collectedQuestions = JSON.parse(savedQuestions);
                renderCollectedQuestions();
                updateStats();
            }
        }

        // 更新统计信息
        function updateStats() {
            totalQuestionsElement.textContent = allQuestions.length;
            totalScoreElement.textContent = totalScore;
            collectedCountElement.textContent = collectedQuestions.length;
        }

        // 显示答题结果
        function showResult() {
            // 收集所有答案
            document.querySelectorAll('input[type="radio"]:checked').forEach(radio => {
                const questionId = radio.name.split('-')[1];
                const userAnswer = radio.value;
                
                // 更新问题对象中的用户答案
                const questionIndex = allQuestions.findIndex(q => q.id === questionId);
                if (questionIndex !== -1) {
                    allQuestions[questionIndex].userAnswer = userAnswer;
                }
            });
            
            document.querySelectorAll('input[data-question-id]').forEach(input => {
                const questionId = input.getAttribute('data-question-id');
                const userAnswer = input.value.trim();
                
                // 更新问题对象中的用户答案
                const questionIndex = allQuestions.findIndex(q => q.id === questionId);
                if (questionIndex !== -1) {
                    allQuestions[questionIndex].userAnswer = userAnswer;
                }
            });
            
            // 计算正确题数和得分
            let correctCount = 0;
            let incorrectCount = 0;
            
            allQuestions.forEach(question => {
                if (question.userAnswer === question.answer) {
                    correctCount++;
                } else if (question.userAnswer !== null) {
                    incorrectCount++;
                }
            });
            
            const score = Math.round(correctCount * questionScore * 10) / 10;
            
            // 更新结果弹窗
            resultTotalScoreElement.textContent = `${score}/${totalScore}`;
            resultCorrectCountElement.textContent = correctCount;
            resultIncorrectCountElement.textContent = incorrectCount;
            resultProgressElement.style.width = `${(score / totalScore) * 100}%`;
            
            // 显示结果弹窗
            resultModal.classList.remove('hidden');
            
            // 高亮显示错题
            highlightWrongAnswers();
        }

        // 隐藏结果弹窗
        function hideResultModal() {
            resultModal.classList.add('hidden');
        }

        // 重新答题
        function restartQuiz() {
            // 重置所有用户答案
            allQuestions.forEach(question => {
                question.userAnswer = null;
            });
            
            // 重新渲染题目
            renderQuestions(currentQuestions);
            
            // 隐藏结果弹窗
            hideResultModal();
            
            showToast('已重置所有答案', 'info');
        }

        // 高亮显示错题
        function highlightWrongAnswers() {
            // 移除之前的高亮
            document.querySelectorAll('.question-card').forEach(card => {
                card.classList.remove('border-red-500', 'border-green-500');
            });
            
            // 高亮错题
            allQuestions.forEach(question => {
                if (question.userAnswer !== null && question.userAnswer !== question.answer) {
                    const card = document.querySelector(`.question-card[data-id="${question.id}"]`);
                    if (card) {
                        card.classList.add('border-red-500');
                    }
                } else if (question.userAnswer === question.answer) {
                    const card = document.querySelector(`.question-card[data-id="${question.id}"]`);
                    if (card) {
                        card.classList.add('border-green-500');
                    }
                }
            });
        }

        // 过滤题目
        function filterQuestions() {
            const searchTerm = searchInput.value.toLowerCase().trim();
            const filterType = questionFilter.value;
            
            currentQuestions = allQuestions.filter(question => {
                const matchesSearch = question.question.toLowerCase().includes(searchTerm) || 
                                     (question.options && question.options.some(option => option.toLowerCase().includes(searchTerm))) ||
                                     (question.answer && question.answer.toLowerCase().includes(searchTerm));
                
                const matchesFilter = filterType === 'all' || 
                                     (filterType === 'collected' && question.isCollected) || 
                                     question.type === filterType;
                
                return matchesSearch && matchesFilter;
            });
            
            renderQuestions(currentQuestions);
        }

        // 切换移动菜单
        function toggleMobileMenu() {
            mobileMenu.classList.toggle('hidden');
        }

        // 处理滚动事件
        function handleScroll() {
            if (window.scrollY > 10) {
                navbar.classList.add('shadow-lg');
                navbar.classList.remove('shadow-md');
            } else {
                navbar.classList.remove('shadow-lg');
                navbar.classList.add('shadow-md');
            }
        }

        // 切换主题
        function toggleTheme() {
            document.body.classList.toggle('dark');
            const isDark = document.body.classList.contains('dark');
            
            if (isDark) {
                document.body.classList.add('bg-gray-900', 'text-white');
                document.body.classList.remove('bg-gray-50', 'text-gray-800');
                themeToggle.innerHTML = '<i class="fa fa-sun-o"></i>';
            } else {
                document.body.classList.remove('bg-gray-900', 'text-white');
                document.body.classList.add('bg-gray-50', 'text-gray-800');
                themeToggle.innerHTML = '<i class="fa fa-moon-o"></i>';
            }
        }

        // 显示提示消息
        function showToast(message, type = 'info') {
            // 创建toast元素
            const toast = document.createElement('div');
            toast.className = 'fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-500 translate-y-20 opacity-0';
            
            // 根据类型设置样式
            let bgColor, textColor, icon;
            switch(type) {
                case 'success':
                    bgColor = 'bg-green-500';
                    textColor = 'text-white';
                    icon = 'fa-check-circle';
                    break;
                case 'error':
                    bgColor = 'bg-red-500';
                    textColor = 'text-white';
                    icon = 'fa-exclamation-circle';
                    break;
                case 'warning':
                    bgColor = 'bg-yellow-500';
                    textColor = 'text-white';
                    icon = 'fa-exclamation-triangle';
                    break;
                case 'info':
                default:
                    bgColor = 'bg-blue-500';
                    textColor = 'text-white';
                    icon = 'fa-info-circle';
                    break;
            }
            
            toast.classList.add(bgColor, textColor);
            
            // 设置内容
            toast.innerHTML = `
                <div class="flex items-center">
                    <i class="fa ${icon} mr-2"></i>
                    <span>${message}</span>
                </div>
            `;
            
            // 添加到页面
            document.body.appendChild(toast);
            
            // 显示动画
            setTimeout(() => {
                toast.classList.remove('translate-y-20', 'opacity-0');
            }, 10);
            
            // 3秒后隐藏
            setTimeout(() => {
                toast.classList.add('translate-y-20', 'opacity-0');
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 500);
            }, 3000);
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
    